<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/js1.js"></script>
    <script src="js/js2.js"></script>
</head>
<body>
    <div id="imgs">
        <div class="i-header">
            <div class="i-h-left" >
                相关书籍
            </div>
            <div class="i-h-right" id="change">
                换一换
            </div>
        </div>
        <div class="i-imgs">
            <img src="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
        </div>
    </div>
    <script>
        // 执行随机函数
        console.log=(rnd(1,5))
        // 执行逻辑层函数
        console.log(createNum(4))
        // 1.找到执行逻辑层代码元素
        var $change=document.getElementById('change')
        var $imgs=document.getElementById('imgs')
        // 2.绑定元素的单击事件
        $change.onclick=function () {
            var arrPaths=['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png',]
            var arrRnd=createNum(4)
            var HTML=""
            for(var i=0;i<arrRnd.lenth;i++){
                HTML+=`<img src="${arrPaths[arrRnd[i]]}" alt="">`
            }
            $pics
        }
    </script>
</body>
</html>